<template>
	<view class="page-container">
			
		<view class="cash-head-block">
			<image src="../../static/alipay_icon.png" class="cash-head-block__icon" mode="scaleToFill" v-if="recordInfo.way === 'alipay'"></image>
			<image src="../../static/bank_icon.png" class="cash-head-block__icon" mode="scaleToFill" v-if="recordInfo.way === 'bank'"></image>
			<image src="../../static/wechat_icon.png" class="cash-head-block__icon" mode="scaleToFill" v-if="recordInfo.way === 'weixin'"></image>
			<view class="cash-head-block__amount">{{recordInfo.withdrawamount}}</view>
			<view class="cash-head-block__status" style=" color: #f80;" v-if="recordInfo.status == 0">提现中</view>
			<view class="cash-head-block__status" v-if="recordInfo.status == 1">提现成功</view>
			<view class="cash-head-block__status" style=" color: #ed2c2c;" v-if="recordInfo.status == 2">提现失败</view>
			<view class="cash-head-block__reason" v-if="recordInfo.status == 2"><text>失败原因：{{recordInfo.audit_description}}</text></view>
		</view>
		
		<view class="cash-data-block">
			<view class="cash-data-block__cell">
				<span class="cash-data-block__cell__hd">提现到</span>
				<view class="cash-data-block__cell__bd">
					<text v-if="recordInfo.way === 'alipay'">支付宝</text>
					<text v-if="recordInfo.way === 'bank'">银行卡</text>
					<text v-if="recordInfo.way === 'weixin'">微信</text>
				</view>
			</view>
			<view class="cash-data-block__cell">
				<span class="cash-data-block__cell__hd">真实姓名</span>
				<view class="cash-data-block__cell__bd">{{recordInfo.bankaccountname}}</view>
			</view>
			<view class="cash-data-block__cell">
				<span class="cash-data-block__cell__hd">
					<text v-if="recordInfo.way === 'alipay'">支付宝账号</text>
					<text v-if="recordInfo.way === 'bank'">银行卡号</text>
					<text v-if="recordInfo.way === 'weixin'">微信号</text>
				</span>
				<view class="cash-data-block__cell__bd">{{recordInfo.bankcardnumber}}</view>
			</view>
		</view>
		
		<view class="cash-data-block">
			<view class="cash-data-block__cell">
				<span class="cash-data-block__cell__hd">提现编号</span>
				<view class="cash-data-block__cell__bd">{{recordInfo.id}}</view>
			</view>
			<view class="cash-data-block__cell">
				<span class="cash-data-block__cell__hd">申请提现</span>
				<view class="cash-data-block__cell__bd">{{recordInfo.addtime}}</view>
			</view>
		</view>
		
		<view class="cash-data-block">
			<view class="cash-data-block__cell">
				<span class="cash-data-block__cell__hd">备注说明</span>
				<view class="cash-data-block__cell__bd">
					<view class="explain-txt">{{recordInfo.description}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				recordInfo: {}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getRecordDetail()
		},
		methods: {
			
			// 获取提现详情
			async getRecordDetail(){
				let params, detailRes;
				params = {
					method: "api/v2/member/bag/record_info",
					id: this.id
				}
				detailRes = await this.$http(params);
				if(detailRes.status){
					this.recordInfo = detailRes.data;
				}else{
					uni.showToast({
						title: detailRes.msg,
						icon: "none"
					})
				}
			}
			
		}
	}
</script>

<style lang="scss">

	page{
		background-color: $uni-bg-color;
	}
	
	.page-container{
		padding: 20rpx 24rpx;
	}
	
	.cash-head-block{
		padding: 80rpx 0;
		text-align: center;
		&__icon{
			width: 120rpx;
			height: 90rpx;
		}
		&__amount{
			padding: 12rpx 0;
			font-size: 42rpx;
		}
		&__status{
			font-size: $uni-font-size-sm;
		}
		&__reason{
			color: $uni-text-color-grey;
			margin-top: 12rpx;
			font-size: $uni-font-size-mini;
		}
	}
	
	.cash-data-block{
		padding: 12rpx 0;
		border-top: 1rpx solid $uni-border-color;
		&__cell{
			display: flex;
			padding: 16rpx 0;
			font-size: $uni-font-size-sm;
			&__hd{
				color: $uni-text-color-grey;
				flex: 0 0 auto;
				width: 180rpx;
			}
			&__bd{
				flex: 1 1 auto;
				text-align: right;
				.explain-txt{
					text-align: left;
				}
			}
		}
	}

</style>
